<template>
<div>
  <div v-for='item in icons' class='border'>
    <span>
      <i :class='item'></i>
    </span>
    <span>{{item}}</span>
  </div>

  <svg class='acd-svg' aria-hidden="true">
     <use xlink:href="#acd-icon-xiansuo1"></use>
  </svg>
</div>
</template>
<script>
export default {
  data () {
    return {
      icons: ['at-icon-arrow-down',
        'at-icon-arrow-left',
        'at-icon-arrow-right',
        'at-icon-arrow-up',
        'at-icon-caret-bottom',
        'at-icon-caret-left',
        'at-icon-caret-right',
        'at-icon-caret-top',
        'at-icon-check',
        'at-icon-circle-check',
        'at-icon-circle-close',
        'at-icon-circle-cross',
        'at-icon-close',
        'at-icon-upload',
        'at-icon-d-arrow-left',
        'at-icon-d-arrow-right',
        'at-icon-d-caret',
        'at-icon-date',
        'at-icon-delete',
        'at-icon-document',
        'at-icon-edit',
        'at-icon-information',
        'at-icon-loading',
        'at-icon-menu',
        'at-icon-message',
        'at-icon-minus',
        'at-icon-more',
        'at-icon-picture',
        'at-icon-plus',
        'at-icon-search',
        'at-icon-setting',
        'at-icon-share',
        'at-icon-star-off',
        'at-icon-star-on',
        'at-icon-time',
        'at-icon-warning',
        'at-icon-delete2',
        'at-icon-upload2',
        'at-icon-view',
        'saas-icon-home',
    'saas-icon-ring',
    'saas-icon-unknown',
    'saas-icon-selec',
    'saas-icon-king-note',
    'saas-icon-note',
    'saas-icon-setting',
    'saas-icon-pliers',
    'saas-icon-notes',
    'saas-icon-res-right',
    'saas-icon-res-down',
    'saas-icon-del',
    'saas-icon-ten',
    'saas-icon-res-left',
    'saas-icon-pencil',
    'saas-icon-unfurked',
    'saas-icon-vir-double-last',
    'saas-icon-contraction',
    'saas-icon-virtual-x',
    'saas-icon-left',
    'saas-icon-right',
    'saas-icon-up',
    'saas-icon-down',
    'saas-icon-t-down',
    'saas-icon-t-up',
    'saas-icon-t-right',
    'saas-icon-t-left',
    'saas-icon-virtual-next',
    'saas-icon-virtual-last',
    'saas-icon-two-note',
    'saas-icon-text',
    'saas-icon-cir-up',
    'saas-icon-heart',
    'saas-icon-power',
    'saas-icon-save',
    'saas-icon-star',
    'saas-icon-clock',
    'saas-icon-cir-right',
    'saas-icon-glass',
    'saas-icon-antiy',
    'saas-icon-refresh',
    'saas-icon-person',
    'saas-icon-lock',
    'saas-icon-cpu',
    'saas-icon-calendar',
    'saas-icon-aliens-ip',
    'saas-icon-ellipses',
    'saas-icon-cir-i',
    'saas-icon-cir-remind',
    'saas-icon-noselec',
    'saas-icon-selecs',
    'saas-icon-black-selec',
    'saas-icon-cube-del',
    'saas-icon-cube-add',
    'saas-icon-next',
    'saas-icon-last',
    'saas-icon-up-down',
    'saas-icon-four',
    'saas-icon-user',
    'saas-icon-backs',
    'saas-icon-vir-double-next',
    'saas-icon-reloads',
    'saas-icon-flag',
    'saas-icon-remind',
    'saas-icon-black-right',
    'saas-icon-x',
    'saas-icon-video',
    'saas-icon-ip',
    'saas-icon-goback',
    'saas-icon-project',
    'saas-icon-person-que',
    'saas-icon-email',
    'saas-icon-unlock',
    'saas-icon-light',
    'saas-icon-cpu-opt',
    'saas-icon-note-opt',
    'saas-icon-photo',
    'saas-icon-clc-five',
    'saas-icon-pieces',
    'saas-icon-king-right',
    'saas-icon-cir-ten',
    'saas-icon-hearts',
    'saas-icon-three',
    'saas-icon-file-add',
    'saas-icon-godown',
    'saas-icon-goup',
    'saas-icon-trend',
    'saas-icon-target',
    'saas-icon-cir-godown',
    'saas-icon-clc-nine',
    'saas-icon-note-fir',
    'saas-icon-note-sec',
    'saas-icon-instrument',
    'saas-icon-tri-notice',
    'saas-icon-rotating-sec',
    'saas-icon-rotating-pause',
    'saas-icon-rotating-add',
    'saas-icon-rotating-unknown',
    'saas-icon-rotating-cir',
    'saas-icon-refleshs',
    'saas-icon-phone',
    'saas-icon-person-virtual',
    'saas-icon-person-ban',
    'saas-icon-black-heart',
    'saas-icon-cir-minus',
    'saas-icon-paper-clip',
    'saas-icon-note-third',
    'saas-icon-cir-thunder',
    'saas-icon-four-ball',
    'saas-icon-page-right',
    'saas-icon-calendary',
    'saas-icon-prot-right',
    'saas-icon-person-set',
    'saas-icon-person-lock',
    'saas-icon-cpu-curve',
    'saas-icon-page-bingo',
    'acd-icon-biaoqian',
    'acd-icon-yonghu'
    ]
    }
  }
}
</script>
<style>
.border span{
  display: block;
  text-align: center;
  height:40px;
  line-height:40px;
}
.border span:first-child{
  display: block;
  text-align: center;
  height:80px;
  line-height:80px;
}
.border {
   float:left;
   width:180px;
   height:120px;
   border:1px solid #EEEEEE;
   line-height: 100px;
}
[class*=" saas-icon-"], [class^=saas-icon-]{
  font-size:26px;
}
</style>




